<template>
    <div>


        <!--一般使用 -->
        <vue-previewer :imgs="imgs" @onRemove="handleRemove" @onClose="closeHandler"></vue-previewer>


        <!--slot引入图片上传元素 -->
        <input  type="hidden" id="slider"  name="slider" v-model="inputname" class="form-control title" placeholder="文件路径">
    </div>
</template>

<script>
   // import draggable from 'vuedraggable'
    export default {
        props: ['tagvalue'],
        data() {
            return {
                inputname: this.tagvalue
            }
        },
        watch:{

        },

        methods: {
            closeHandler () {
                console.log('cloooooose')
            },
            handleRemove (index, fileList, target) {
                this.imgs = fileList
                let arr = $("#slider").val().split(',');
                arr.splice(index+1,1);
                $("#slider").val(arr);
            },
            getimgs(){
                if (this.tagvalue == "") {
                    return [];
                } else {
                    let arr = this.inputname.split(',');
                    let c = [];
                    for (let i = 0; i < arr.length; i++) {

                        c.push({'src': '/storage/' + arr[i]});

                    }
                    return c;
                }
            }

        },
        computed: {
            // 计算属性的 getter
            imgs: function () {
                // `this` 指向 vm 实例
                return this.getimgs()
            }
        }
    }
</script>